import React from 'react';
import { Modal, Form, Input, Button, message } from 'antd';
import axios from 'axios';
import {connect} from 'react-redux';

const App = (props) => {

  const [confirmLoading, setConfirmLoading] = React.useState(false);

  const handleOk = () => {
    setConfirmLoading(true);
    // setTimeout(() => {
    //   props.visible(false);
    //   setConfirmLoading(false);
    // }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    props.visible(false);
  };

  const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
  };

  const onFinish = (values) => {
    axios.post('http://localhost:8080/tsonglist/create',{
      name:values.name,
      creator: props.id,
    }).then(()=>{
      message.success("创建成功");
    }).catch(()=>{
      message.error("创建失败")
    }).finally(
      props.visible(false)
    )
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <>
      <Modal
        title="Title"
        visible={true}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        footer={[]}
      >
        <Form
          {...layout}
          name="basic"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="歌单名"
            name="name"
            rules={[{ required: true, message: '歌单名称不可以为空' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item {...tailLayout}>
            <Button key="submit" type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

const MapStateToProps = (state) => {
  return {
    id:state.id
  }
}

export default connect(MapStateToProps)(App);